<template>
  <div>
    <!-- 传递抽取后的7个省份数据给Chart组件 -->
    <Chart :cdata="cdata" />
  </div>
</template>

<script>
import Chart from './chart.vue'
import { mapActions } from "vuex";

export default {
  data () {
    return {
      drawTiming: null,
      provinceRiskData: [], // 1. 新增：存储接口返回的所有省份数据（挂载到this上）
      userData: { id: '' }, // 2. 新增：初始化userData，避免undefined
      cdata: {
        year: new Date().getFullYear(),
        weekCategory: [], // X轴：随机7省名称
        maxData: 1, // 风险值上限（0-1）
        weekMaxData: [], // 占位背景数据
        weekLineData: [], // Y轴：7省风险值
        pickedProvinces: [] // 选中的7省完整信息（用于Tooltip显示风险等级）
      }
    }
  },
  components: { Chart },
  mounted () {
    // 3. 先从Vuex获取用户ID，再初始化数据（确保userData.id有值）
    this.userData.id = this.$store.state.user.userInfo?.id || '';
    if (!this.userData.id) {
      console.error('用户ID获取失败，无法请求省份数据');
      return; // 无用户ID时终止，避免无效请求
    }
    this.initData(); // 首次获取数据
    // 可选：每6秒刷新一次（不需要可删除）
    this.drawTiming = setInterval(() => {
      this.initData();
    }, 6000);
  },
  beforeDestroy () {
    clearInterval(this.drawTiming); // 销毁定时器，避免内存泄漏
  },
  methods: {
    ...mapActions(['companyDistribution']),

    // 核心：获取接口数据 + 随机抽取7个省份
    async initData() {
      try {
        // 4. 调用Vuex Action获取省份数据（传用户ID）
        const response = await this.companyDistribution(this.userData.id);
        // 校验接口返回格式（确保是数组，避免后续map报错）
        if (Array.isArray(response.data)) {
          this.provinceRiskData = response.data; // 赋值给组件实例属性
        } else {
          console.error('接口返回数据格式错误，需为数组', response.data);
          this.provinceRiskData = []; // 格式错误时置空，避免崩溃
          return;
        }

        // 5. 若接口返回的省份数据不足7个，直接用全部数据（避免抽取失败）
        const targetCount = Math.min(7, this.provinceRiskData.length);
        // 调用抽取方法（注意：这里用this.provinceRiskData，而非全局变量）
        const picked = this.randomPickN(this.provinceRiskData, targetCount);
        this.cdata.pickedProvinces = picked;

        // 6. 映射X轴、Y轴数据
        this.cdata.weekCategory = picked.map(item => item.name || '未知省份'); // 兼容无name的情况
        this.cdata.weekLineData = picked.map(item => {
          // 兼容风险值异常（如null/undefined），默认设为0
          return typeof item.riskValue === 'number' ? item.riskValue : 0;
        });

        // 7. 生成占位背景数据（与选中省份数量一致）
        this.cdata.weekMaxData = Array(picked.length).fill(this.cdata.maxData);

      } catch (error) {
        // 8. 捕获接口请求异常（网络错误、后端报错等）
        console.error('获取省份风险数据失败:', error);
        // 异常时重置数据，避免图表显示旧数据
        this.cdata.weekCategory = [];
        this.cdata.weekLineData = [];
        this.cdata.weekMaxData = [];
        this.cdata.pickedProvinces = [];
      }
    },

    // 优化：通用方法（抽取N个不重复元素，而非固定7个，更灵活）
    randomPickN (arr, count) {
      if (!Array.isArray(arr) || arr.length === 0 || count <= 0) {
        return []; // 入参异常时返回空数组
      }
      const copyArr = [...arr]; // 深拷贝，避免修改原数组
      const result = [];
      for (let i = 0; i < count; i++) {
        if (copyArr.length === 0) break;
        const randomIndex = Math.floor(Math.random() * copyArr.length);
        // 从拷贝数组中删除选中元素，避免重复
        result.push(copyArr.splice(randomIndex, 1)[0]);
      }
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
